	<style>
		.popover{
			border: 1px solid #bce8f1;
		}
		.popover-title{
			background-image: -webkit-gradient(linear, left 0%, left 100%, from(#d9edf7), to(#c4e3f3));
			background-image: -webkit-linear-gradient(top, #d9edf7, 0%, #c4e3f3, 100%);
			background-image: -moz-linear-gradient(top, #d9edf7 0%, #c4e3f3 100%);
			background-image: linear-gradient(to bottom, #d9edf7 0%, #c4e3f3 100%);
			color: #777;
		}
		.arrow{
			border-right-color:#bce8f1 !important;
		}
	</style>      
      <div class="row" style="text-align:center;margin:15px auto 30px auto;">
        <div class="col-lg-4">
          <img class="img-circle" alt="140x140" style="width: 140px; height: 140px;" src="http://placehold.it/140x140">
          <h2 style="font-family:'StagSansLight';">Item1</h2>
          <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod.</p>
        </div><!-- /.col-lg-4 -->
        <div class="col-lg-4">
          <img class="img-circle" alt="140x140" style="width: 140px; height: 140px;" src="http://placehold.it/140x140">
          <h2 style="font-family:'StagSansLight';">Item2</h2>
          <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
        </div><!-- /.col-lg-4 -->
        <div class="col-lg-4">
          <img class="img-circle" alt="140x140" style="width: 140px; height: 140px;" src="http://placehold.it/140x140">
          <h2 style="font-family:'StagSansLight';">Item3</h2>
          <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
        </div><!-- /.col-lg-4 -->
      </div>

	<div class="popover right" style="display:block;position:relative;margin-bottom:30px;max-width:100%">
        <div class="arrow"></div>
        <h3 class="popover-title"><b>Síguenos en</b></h3>
        <div class="popover-content">
          	<ul class="list-unstyled list-inline list-social-icons">
		      <li style="width:24%;text-align:center">
		      	<a href="#facebook"><img title="Facebook" data-toggle="tooltip" data-placement="right" data-delay="300" width="30%" height="30%" src="../img/facebook-icon.png"></a>
  			  </li>
		      <li style="width:24%;text-align:center">
		      	<a href="#twitter"><img title="Twitter" data-toggle="tooltip" data-placement="right" data-delay="300" width="30%" height="30%" src="../img/twitter-icon.png"></a>
	      	  </li>
		      <li style="width:24%;text-align:center">
		      	<a href="#google+"><img title="Google+" data-toggle="tooltip" data-placement="right" data-delay="300" width="30%" height="30%" src="../img/google-plus-icon.png"></a>
	      	  </li>
		      <li style="width:24%;text-align:center">
		      	<a href="#youtube"><img title="YouTube" data-toggle="tooltip" data-placement="right" data-delay="300" width="30%" height="30%" src="../img/youtube-icon.png"></a>
	      	  </li>
		    </ul>
        </div>
      </div>
  <script>
  	$('.popover-content img').tooltip();
  </script>